<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div style="background-color: #f5f5f5" style="background-color: #f5f5f5" id="app" v-cloak>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="60%"
    >
        <div>
            <div v-for="(item3,index) in format" :key="item3.name">
                <h2 style="margin: 0;">{{index + 1}}.{{item3.name}}({{questionTypeName[item3.type]}})({{item3.necessary?"必做":"选做"}})</h2>
                <div class="px-20 ">
                <span style="font-size:16px;margin:20px 10px;color:#00aeff;" v-if="item3.note">{{ item3.note }}</span>

                <div v-if="item3.type==0" style="margin:10px 0;">
                    <el-radio :label="item4" v-for="(item4,index4) in item3.option" border size="medium">{{item4}}<span
                                v-if="item3.other_option==index4">________</span></el-radio>
                </div>
                <div v-if="item3.type==5" style="margin:10px 0;">
                    <el-radio :label="item4" v-for="item4 in item3.option" border size="medium">{{item4}}</el-radio>
                </div>
                  <div v-if="item3.type==7" style="margin:10px 0;">
                    <el-radio :label="item4" v-for="item4 in item3.option" border size="medium">{{item4}}</el-radio>
                </div>
                <div v-if="item3.type==1" style="margin:0 0 10px 0;">
                    <el-checkbox border v-for="(item4,index4) in item3.option" size="medium">{{item4}}<span
                                v-if="item3.other_option==index4">________</span></el-checkbox>
                </div>
                <div v-if="item3.type==4" style="margin:10px 0;">
                    <el-row :gutter="20"
                            style="background-color:#d7d7d7;text-align:center;padding:20px;border-radius:5px 5px 0 0;">
                        <el-col :span="3">选项</el-col>
                        <el-col :span="3" v-for="item7 in item3.option">{{item7}}</el-col>
                    </el-row>
                    <el-row :gutter="20" v-for="item5 in item3.title_list"
                            style="padding:20px;text-align:center;border:1px solid #d7d7d7">
                        <el-col :span="3">{{item5}}</el-col>
                        <el-col :span="3" v-for="(item7,index3) in item3.option">
                            <el-radio :label="index3+item7">&nbsp;</el-radio>
                        </el-col>
                    </el-row>
                </div>
                <div v-if="item3.type==3" style="margin:10px 0;">
                    <el-input placeholder="请输入内容"></el-input>
                </div>
                <div v-if="item3.type==2" style="margin:10px 0;">
                    <i v-for="item5 in item3.text_list" style="margin:10px 0;display:inline-block;"><i v-if="item5!='$'"
                                                                                                       style="font-size:18px;font-style: normal;">{{item5}}</i>
                        <el-input
                                v-if="item5=='$'"
                                style="width:80px;margin:0 15px 0 10px;font-style: normal;">
                        </el-input>
                    </i>
                </div>
                <div v-if="item3.type == 6" style="margin: 20px 0">
                    <el-radio
                            :label="item4"
                            v-for="(item4, index4) in item3.option"
                            border
                            size="medium"
                    >{{ item4
                        }}<!--(选择此项将会跳转第{{jumpSelect(item3.jump[index4])+1||' '}}题)-->
                        （{{(jumpSelect(item3.jump[index4])+1)&&((jumpSelect(item3.jump[index4])+1)!=parseInt(index)+2)?"选择此项将会跳转第"+(jumpSelect(item3.jump[index4])+1)+"题":"不跳转"}}）
                    </el-radio
                    >
                </div>
            </div>
            </div>
        </div>
    </el-dialog>
    <el-container>
        <el-header style="display: flex; justify-content: space-between">
            <div
                    style="
            background-color: #00d297;
            width: 170px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            margin: 0 0 0 100px;
          "
                    @click="jump"
            >
                <i class="el-icon-arrow-left" style="margin: 10px"></i>返回
            </div>
            <div
                    style="
            width: 170px;
            color: white;
            font-weight: 600;
            font-size:24px
          "
            >
                问卷模板编辑
            </div>
            <div style="display:flex;">
                <div
                        style="
            background-color: #ffffff;
            width: 170px;
            color: #00d297;
            font-weight: 600;
            cursor: pointer;
          "
                        @click="dialogVisible1=true"
                >
                    <i class="el-icon-check" style="margin: 10px"></i>预览
                </div>
                <div
                        style="
            background-color: #00d297;
            width: 170px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            margin: 0 100px 0 0;
          "
                        @click="submit"
                >
                    <i class="el-icon-check" style="margin: 10px"></i>完成编辑
                </div>
            </div>

        </el-header>
        <el-container>
            <el-aside width="250px"
            >
                <el-radio-group v-model="tabPosition" style="margin: 30px 0">
                    <el-radio-button label="top">题型选择</el-radio-button>
                    <el-radio-button label="right">问卷大纲</el-radio-button>
                </el-radio-group>
                <div v-if="tabPosition == 'top'">
                    <div class="title-btn" @click="addItem(0)" v-if="!is_automatic">
                        <i
                                class="el-icon-turn-off"
                                style="
                  position: absolute;
                  top: 50%;
                  left: 10px;
                  font-size: 24px;
                  transform: translateY(-50%);
                "
                        ></i
                        >{{questionTypeName[0]}}
                    </div>
                    <div class="title-btn" @click="addItem(1)" v-if="!is_automatic">
                        <i
                                class="el-icon-check"
                                style="
                  position: absolute;
                  top: 50%;
                  left: 10px;
                  font-size: 24px;
                  transform: translateY(-50%);
                "
                        ></i
                        >{{questionTypeName[1]}}
                    </div>
                    <div class="title-btn" @click="addItem(2)" v-if="!is_automatic">
                        <i
                                class="el-icon-tickets"
                                style="
                  position: absolute;
                  top: 50%;
                  left: 10px;
                  font-size: 24px;
                  transform: translateY(-50%);
                "
                        ></i
                        >{{questionTypeName[2]}}
                    </div>

                    <div class="title-btn" @click="addItem(3)" v-if="!is_automatic">
                        <i
                                class="el-icon-edit"
                                style="
                  position: absolute;
                  top: 50%;
                  left: 10px;
                  font-size: 24px;
                  transform: translateY(-50%);
                "
                        ></i
                        >{{questionTypeName[3]}}
                    </div>
                    <div class="title-btn" @click="addItem(4)" v-if="!is_automatic">
                        <i
                                class="el-icon-set-up"
                                style="
                  position: absolute;
                  top: 50%;
                  left: 10px;
                  font-size: 24px;
                  transform: translateY(-50%);
                "
                        ></i
                        >{{questionTypeName[4]}}
                    </div>
                    <div class="title-btn" @click="addItem(5)" v-if="is_automatic">
                        <i
                                class="el-icon-turn-off"
                                style="
                  position: absolute;
                  top: 50%;
                  left: 10px;
                  font-size: 24px;
                  transform: translateY(-50%);
                "
                        ></i
                        >{{questionTypeName[5]}}
                    </div>
                    <div class="title-btn" @click="addItem(6)" v-if="!is_automatic">
                        <i
                                class="el-icon-turn-off"
                                style="
 position: absolute;
 top: 50%;
left: 10px;
 font-size: 24px;
 transform: translateY(-50%);
 "
                        ></i
                        >{{questionTypeName[6]}}
                    </div>

                     <div class="title-btn" @click="addItem(7)" v-if="!is_automatic">
                        <i
                                class="el-icon-set-up"
                                style="
                  position: absolute;
                  top: 50%;
                  left: 10px;
                  font-size: 24px;
                  transform: translateY(-50%);
                "
                        ></i
                        >{{questionTypeName[7]}}
                    </div>
                </div>
                <div v-if="tabPosition == 'right'">
                    <ul style="text-align: left; padding: 0 10px">
                        <div v-for="(item, index) in format">
                            <ol style="margin: 15px">
                                {{
                                    index + 1
                                }}.{{
                                    item.title
                                }}
                            </ol>
                        </div>
                    </ul>
                </div>
            </el-aside>

            <el-main>
                <div style="padding: 20px 0;height: calc(98vh - 150px);overflow: scroll;">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="标题">
                            <el-input
                                    v-model="form.name"
                                    placeholder="请输入标题"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="问卷分类">
                            <el-select
                                    v-model="form.q_class_id"
                                    placeholder="请选择问卷分类"
                                    style="width: 100%"
                            >
                                <el-option
                                        :label="item.name"
                                        :value="item.q_class_id"
                                        v-for="item in class1"
                                        :key="item.q_class_id"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="说明">
                            <el-input
                                    type="textarea"
                                    v-model="form.header_note"
                                    placeholder="请输入活动说明"
                                    autosize
                            ></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="满分">
                            <el-input
                                    type="number"
                                    v-model="full_mark"
                                    placeholder="请输入满分"
                                    autosize
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="及格分数">
                            <el-input
                                    type="number"
                                    v-model="pass_mark"
                                    placeholder="请输入及格分数"
                                    autosize
                            ></el-input>
                        </el-form-item> -->
                        <el-form-item label="是否发布">
                            <el-select v-model="available" style="width: 100%">
                                <el-option label="立即发布" :value="true"></el-option>
                                <el-option label="暂不发布" :value="false"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="填写上限">
                            <el-input
                                    type="number"
                                    v-model="max_num"
                                    placeholder=""
                                    autosize
                            ></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="显示模式">
                            <el-select
                                    v-model="form.show_mode"
                                    placeholder="请选择分数显示模式"
                                    style="width: 100%"
                            >
                                <el-option
                                        :label="item"
                                        :value="index"
                                        v-for="(item, index) in mode"
                                        :key="index"
                                ></el-option>
                            </el-select>
                        </el-form-item> -->
                        
                    </el-form>
                    <el-collapse v-model="activeNames">
                        <el-collapse-item
                                :title="index + 1 + '.' + item.title + '(' +questionTypeName[item.type]+')'"
                                :name="index"
                                v-for="(item, index) in format"
                                :key="index"
                        >
                            <div class="box">
                                <div v-if="item.type == 3">
                                    <el-input placeholder="请输入题目标题" v-model="item.title">
                                        <template slot="prepend">标题</template>
                                    </el-input>
                                    <el-row>
                                        <div style="margin: 20px 0">
                                            <el-col :span="4">
                                                <el-checkbox
                                                        v-model="item.necessary"
                                                        style="margin: 10px"
                                                >必答题
                                                </el-checkbox
                                                >
                                                <el-popover
                                                        placement="right"
                                                        width="400"
                                                        trigger="click">
                                                    <el-input
                                                            type="textarea"
                                                            :rows="4"
                                                            placeholder="请输入题目说明"
                                                            v-model="item.note">
                                                    </el-input>
                                                    <el-button slot="reference" type="text">题目说明</el-button>
                                                </el-popover>
                                            </el-col>
                                            <el-col
                                                    :span="16"
                                                    :offset="4"
                                                    style="display: flex; justify-content: end"
                                            >
                                                <div class="btn" @click="copyItem(index)">复制</div>
                                                <div class="btn" @click="delItem(index)">删除</div>
                                                <div class="btn" @click="upItem(index)">上移</div>
                                                <div class="btn" @click="downItem(index)">下移</div>
                                                <div class="btn" @click="topItem(index)">置顶</div>
                                                <div class="btn" @click="bottomItem(index)">
                                                    置底
                                                </div>
                                            </el-col
                                            >
                                        </div>
                                    </el-row>
                                </div>
                                <div v-if="item.type == 2">
                                    <div>
                                        <el-input placeholder="请输入题目标题" v-model="item.title">
                                            <template slot="prepend">标题</template>
                                        </el-input>
                                    </div>
                                    <div style="margin: 20px 0">
                    <span
                            style="font-size: 18px; color: #333; font-weight: 600"
                    >{{ item.text }}</span
                    >
                                    </div>
                                    <el-input
                                            placeholder="请输入文字内容"
                                            v-model="item.word"
                                            type="textarea"
                                            :rows="4"
                                    >
                                    </el-input>
                                    <div style="margin: 20px 0"></div>
                                    <el-row :gutter="10">
                                        <el-col :span="20"
                                        >
                                            <el-button  @click="addText(item)"
                                            >插入文字内容
                                            </el-button
                                            >
                                            <el-button  @click="addFill(item)"
                                            >插入填空内容
                                            </el-button
                                            >
                                            <el-button  @click="addHuanhang(item)"
                                            >换行</el-button
                                            >
                                            <el-button  @click="delFill(item)"
                                                       style="margin-right:5px;">删除内容</el-button>
                                            <el-popover
                                                    placement="bottom"
                                                    width="800"
                                                    trigger="click"
                                            >
                                                <el-table :data="item.blank_rule">
                                                    <el-table-column
                                                            type="index"
                                                            width="100"
                                                            label="填空序号"
                                                    >
                                                    </el-table-column>
                                                    <el-table-column
                                                            width="200"
                                                            property="type"
                                                            label="填空类型"
                                                    >
                                                        <template slot-scope="scope">
                                                            <el-select
                                                                    v-model="scope.row.type"
                                                                    placeholder="请选择类型"
                                                                    @change="typeChange(scope.row)"
                                                            >
                                                                <el-option label="文本" :value="1"></el-option>
                                                                <!-- <el-option label="电话" :value="2"></el-option> -->
                                                                <el-option label="数字" :value="0"></el-option>
                                                            </el-select>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                            width="200"
                                                            property="min"
                                                            label="最小值"
                                                    >
                                                        <template slot-scope="scope">
                                                            <el-input-number
                                                                    v-model="scope.row.min"
                                                                    :min="1"
                                                                    v-if="scope.row.type != 2"
                                                            ></el-input-number>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                            width="200"
                                                            property="max"
                                                            label="最大值"
                                                    >
                                                        <template slot-scope="scope">
                                                            <el-input-number
                                                                    v-model="scope.row.max"
                                                                    :min="1"
                                                                    v-if="scope.row.type != 2"
                                                            ></el-input-number>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                                <el-button slot="reference" plain>填空属性</el-button>
                                            </el-popover>
                                        </el-col
                                        >
                                    </el-row>

                                    <el-row>
                                        <div style="margin: 20px 0">
                                            <el-col :span="4"
                                            >
                                                <el-checkbox
                                                        v-model="item.necessary"
                                                        style="margin: 10px"
                                                >必答题
                                                </el-checkbox
                                                >
                                                <el-popover
                                                        placement="right"
                                                        width="400"
                                                        trigger="click">
                                                    <el-input
                                                            type="textarea"
                                                            :rows="4"
                                                            placeholder="请输入题目说明"
                                                            v-model="item.note">
                                                    </el-input>
                                                    <el-button slot="reference" type="text">题目说明</el-button>
                                                </el-popover>
                                            </el-col
                                            >
                                            <el-col
                                                    :span="16"
                                                    :offset="4"
                                                    style="display: flex; justify-content: end"
                                            >
                                                <div class="btn" @click="copyItem(index)">复制</div>
                                                <div class="btn" @click="delItem(index)">删除</div>
                                                <div class="btn" @click="upItem(index)">上移</div>
                                                <div class="btn" @click="downItem(index)">下移</div>
                                                <div class="btn" @click="topItem(index)">置顶</div>
                                                <div class="btn" @click="bottomItem(index)">
                                                    置底
                                                </div>
                                            </el-col
                                            >
                                        </div>
                                    </el-row>
                                </div>
                                <div v-if="item.type == 0">
                                    <el-input placeholder="请输入题目标题" v-model="item.title">
                                        <template slot="prepend">标题</template>
                                    </el-input>
                                    <el-row>
                                        <div style="margin: 20px 0">
                                            <el-col :span="4"
                                            >
                                                <el-checkbox
                                                        v-model="item.necessary"
                                                        style="margin: 10px"
                                                >必答题
                                                </el-checkbox
                                                >
                                                <el-popover
                                                        placement="right"
                                                        width="400"
                                                        trigger="click">
                                                    <el-input
                                                            type="textarea"
                                                            :rows="4"
                                                            placeholder="请输入题目说明"
                                                            v-model="item.note">
                                                    </el-input>
                                                    <el-button slot="reference" type="text">题目说明</el-button>
                                                </el-popover>
                                            </el-col
                                            >
                                            <el-col
                                                    :span="16"
                                                    :offset="4"
                                                    style="display: flex; justify-content: end"
                                            >
                                                <div class="btn" @click="copyItem(index)">复制</div>
                                                <div class="btn" @click="delItem(index)">删除</div>
                                                <div class="btn" @click="upItem(index)">上移</div>
                                                <div class="btn" @click="downItem(index)">下移</div>
                                                <div class="btn" @click="topItem(index)">置顶</div>
                                                <div class="btn" @click="bottomItem(index)">
                                                    置底
                                                </div>
                                            </el-col
                                            >
                                        </div>
                                    </el-row>
                                    <div>
                                        <el-row
                                                :gutter="20"
                                                style="
                        background-color: #d7d7d7;
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                        >
                                            <el-col :span="8"
                                            >
                                                <div class="grid-content bg-purple">选项</div>
                                            </el-col
                                            >
                                            <el-col :span="4" :offset="12"
                                            >
                                                <div class="grid-content bg-purple">
                                                    上移 下移
                                                </div>
                                            </el-col
                                            >
                                        </el-row>
                                        <el-row
                                                :gutter="20"
                                                style="
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                                v-for="(item1, index1) in item.option"
                                                :key="index"
                                        >
                                            <el-col :span="8"
                                            >
                                                <el-input
                                                        v-model="item.option[index1]"
                                                        :placeholder="'选项' + letter[index1]"
                                                        style="margin: 10px"
                                                ></el-input
                                                >
                                            </el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-circle-plus-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="addOption(item.option, index1,item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-remove-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="delOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1" :offset="11"
                                            ><i
                                                        class="el-icon-top"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="upOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-bottom"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="downOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-button
                                                        @click="addotherItem(item)"
                                                        style="margin-left: 10px"
                                                >添加其他选项
                                                </el-button
                                                >
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                                <div v-if="item.type == 1">
                                    <el-input placeholder="请输入题目标题" v-model="item.title">
                                        <template slot="prepend">标题</template>
                                    </el-input>
                                    <div style="margin: 10px 10px 0 0">
                                        <span style="margin: 0 20px 0 0">最小选择数:</span>
                                        <el-input-number
                                                v-model="item.min_choice"
                                                :min="1"
                                                :max="item.max_choice"
                                        ></el-input-number>
                                    </div>
                                    <div style="margin: 10px 0">
                                        <span style="margin: 0 20px 0 0">最大选择数:</span>
                                        <el-input-number
                                                v-model="item.max_choice"
                                                :min="item.min_choice"
                                                :max="item.option.length"
                                        ></el-input-number>
                                    </div>
                                    <el-row>
                                        <div style="margin: 20px 0">
                                            <el-col :span="4"
                                            >
                                                <el-checkbox
                                                        v-model="item.necessary"
                                                        style="margin: 10px"
                                                >必答题
                                                </el-checkbox
                                                >
                                                <el-popover
                                                        placement="right"
                                                        width="400"
                                                        trigger="click">
                                                    <el-input
                                                            type="textarea"
                                                            :rows="4"
                                                            placeholder="请输入题目说明"
                                                            v-model="item.note">
                                                    </el-input>
                                                    <el-button slot="reference" type="text">题目说明</el-button>
                                                </el-popover>
                                            </el-col
                                            >
                                            <el-col
                                                    :span="16"
                                                    :offset="4"
                                                    style="display: flex; justify-content: end"
                                            >
                                                <div class="btn" @click="copyItem(index)">复制</div>
                                                <div class="btn" @click="delItem(index)">删除</div>
                                                <div class="btn" @click="upItem(index)">上移</div>
                                                <div class="btn" @click="downItem(index)">下移</div>
                                                <div class="btn" @click="topItem(index)">置顶</div>
                                                <div class="btn" @click="bottomItem(index)">
                                                    置底
                                                </div>
                                            </el-col
                                            >
                                        </div>
                                    </el-row>

                                    <div>
                                        <el-row
                                                :gutter="20"
                                                style="
                        background-color: #d7d7d7;
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                        >
                                            <el-col :span="8"
                                            >
                                                <div class="grid-content bg-purple">选项</div>
                                            </el-col
                                            >
                                            <el-col :span="4" :offset="12"
                                            >
                                                <div class="grid-content bg-purple">
                                                    上移 下移
                                                </div>
                                            </el-col
                                            >
                                        </el-row>
                                        <el-row
                                                :gutter="20"
                                                style="
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                                v-for="(item1, index1) in item.option"
                                                :key="index"
                                        >
                                            <el-col :span="8"
                                            >
                                                <el-input
                                                        v-model="item.option[index1]"
                                                        :placeholder="'选项' + letter[index1]"
                                                        style="margin: 10px"
                                                ></el-input
                                                >
                                            </el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-circle-plus-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="addOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-remove-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="delOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1" :offset="11"
                                            ><i
                                                        class="el-icon-top"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="upOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-bottom"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="downOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-button
                                                        @click="addotherItem(item)"
                                                        style="margin-left: 10px"
                                                >添加其他选项
                                                </el-button
                                                >
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                                <div v-if="item.type == 4">
                                    <el-input placeholder="请输入题目标题" v-model="item.title">
                                        <template slot="prepend">标题</template>
                                    </el-input>

                                    <el-row>
                                        <div style="margin: 20px 0">
                                            <el-col :span="4"
                                            >
                                                <el-checkbox
                                                        v-model="item.necessary"
                                                        style="margin: 10px"
                                                >必答题
                                                </el-checkbox
                                                >
                                                <el-popover
                                                        placement="right"
                                                        width="400"
                                                        trigger="click">
                                                    <el-input
                                                            type="textarea"
                                                            :rows="4"
                                                            placeholder="请输入题目说明"
                                                            v-model="item.note">
                                                    </el-input>
                                                    <el-button slot="reference" type="text">题目说明</el-button>
                                                </el-popover>
                                            </el-col
                                            >
                                            <el-col
                                                    :span="16"
                                                    :offset="4"
                                                    style="display: flex; justify-content: end"
                                            >
                                                <div class="btn" @click="copyItem(index)">复制</div>
                                                <div class="btn" @click="delItem(index)">删除</div>
                                                <div class="btn" @click="upItem(index)">上移</div>
                                                <div class="btn" @click="downItem(index)">下移</div>
                                                <div class="btn" @click="topItem(index)">置顶</div>
                                                <div class="btn" @click="bottomItem(index)">
                                                    置底
                                                </div>
                                            </el-col
                                            >
                                        </div>
                                    </el-row>

                                    <div>
                                        <el-row
                                                :gutter="20"
                                                style="
                        background-color: #d7d7d7;
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                        >
                                            <el-col :span="8"
                                            >
                                                <div class="grid-content bg-purple">
                                                    选项(横向题目)
                                                </div>
                                            </el-col
                                            >
                                            <el-col :span="4" :offset="12"
                                            >
                                                <div class="grid-content bg-purple">
                                                    左移 右移
                                                </div>
                                            </el-col
                                            >
                                        </el-row>
                                        <el-row
                                                :gutter="20"
                                                style="
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                                v-for="(item1, index1) in item.option"
                                                :key="index"
                                        >
                                            <el-col :span="8"
                                            >
                                                <el-input
                                                        v-model="item.option[index1]"
                                                        :placeholder="'选项' + letter[index1]"
                                                        style="margin: 10px"
                                                ></el-input
                                                >
                                            </el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-circle-plus-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="addOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-remove-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="delOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1" :offset="11"
                                            ><i
                                                        class="el-icon-top"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="upOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-bottom"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="downOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                        </el-row>
                                    </div>
                                    <div>
                                        <el-row
                                                :gutter="20"
                                                style="
                        background-color: #d7d7d7;
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                        >
                                            <el-col :span="8"
                                            >
                                                <div class="grid-content bg-purple">
                                                    小题目选项(纵向题目)
                                                </div>
                                            </el-col
                                            >
                                            <el-col :span="4" :offset="12"
                                            >
                                                <div class="grid-content bg-purple">
                                                    上移 下移
                                                </div>
                                            </el-col
                                            >
                                        </el-row>
                                        <el-row
                                                :gutter="20"
                                                style="
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                                v-for="(item1, index1) in item.title_list"
                                                :key="index"
                                        >
                                            <el-col :span="8"
                                            >
                                                <el-input
                                                        v-model="item.title_list[index1]"
                                                        :placeholder="'选项' + letter[index1]"
                                                        style="margin: 10px"
                                                ></el-input
                                                >
                                            </el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-circle-plus-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="addOption1(item.title_list, index1)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-remove-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="delOption1(item.title_list, index1)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1" :offset="11"
                                            ><i
                                                        class="el-icon-top"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="upOption1(item.title_list, index1)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-bottom"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="downOption1(item.title_list, index1)"
                                                ></i
                                                ></el-col>
                                        </el-row>
                                    </div>
                                </div>
                                <div v-if="item.type == 5">
                                    <el-input placeholder="请输入题目标题" v-model="item.title">
                                        <template slot="prepend">标题</template>
                                    </el-input>
                                    <el-row>
                                        <div style="margin: 20px 0">
                                            <el-col :span="4"
                                            >
                                                <el-checkbox
                                                        v-model="item.necessary"
                                                        style="margin: 10px"
                                                >必答题
                                                </el-checkbox
                                                >
                                                <el-popover
                                                    placement="right"
                                                    width="400"
                                                    trigger="click">
                                                <el-input
                                                        type="textarea"
                                                        :rows="4"
                                                        placeholder="请输入题目说明"
                                                        v-model="item.note">
                                                </el-input>
                                                <el-button slot="reference" type="text">题目说明</el-button>
                                            </el-popover>
                                            </el-col>
                                            <el-col
                                                    :span="16"
                                                    :offset="4"
                                                    style="display: flex; justify-content: end"
                                            >
                                                <div class="btn" @click="copyItem(index)">复制</div>
                                                <div class="btn" @click="delItem(index)">删除</div>
                                                <div class="btn" @click="upItem(index)">上移</div>
                                                <div class="btn" @click="downItem(index)">下移</div>
                                                <div class="btn" @click="topItem(index)">置顶</div>
                                                <div class="btn" @click="bottomItem(index)">
                                                    置底
                                                </div>
                                            </el-col
                                            >
                                        </div>
                                    </el-row>
                                    <div>
                                        <el-row
                                                :gutter="20"
                                                style="
                        background-color: #d7d7d7;
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                        >
                                            <el-col :span="8"
                                            >
                                                <div class="grid-content bg-purple">选项</div>
                                            </el-col
                                            >
                                            <el-col :span="4" :offset="4"
                                            >
                                                <div class="grid-content bg-purple">分数</div>
                                            </el-col
                                            >
                                            <el-col :span="4" :offset="4"
                                            >
                                                <div class="grid-content bg-purple">
                                                    上移 下移
                                                </div>
                                            </el-col
                                            >
                                        </el-row>
                                        <el-row
                                                :gutter="20"
                                                style="
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                                v-for="(item1, index1) in item.option"
                                                :key="index"
                                        >
                                            <el-col :span="8"
                                            >
                                                <el-input
                                                        v-model="item.option[index1]"
                                                        :placeholder="'选项' + letter[index1]"
                                                        style="margin: 10px"
                                                ></el-input
                                                >
                                            </el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-circle-plus-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="addOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-remove-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="delOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="2" :offset="3"
                                            >
                                                <el-input
                                                        type="number"
                                                        v-model="item.score[index1]"
                                                        placeholder="分数"
                                                        style="margin: 10px"
                                                ></el-input
                                                >
                                            </el-col>
                                            <el-col :span="1" :offset="6"
                                            ><i
                                                        class="el-icon-top"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="upOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-bottom"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="downOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                        </el-row>
                                    </div>
                                </div>
                                <div v-if="item.type == 6">
                                    <el-input placeholder="请输入题目标题" v-model="item.title">
                                        <template slot="prepend">标题</template>
                                    </el-input>
                                    <el-row>
                                        <div style="margin: 20px 0">
                                            <el-col :span="8"
                                            ><el-popover
                                                        placement="right"
                                                        width="400"
                                                        trigger="click"
                                                >
                                                    <el-input
                                                            type="textarea"
                                                            :rows="4"
                                                            placeholder="请输入题目说明"
                                                            v-model="item.note"
                                                    >
                                                    </el-input>
                                                    <el-button slot="reference" type="text"
                                                    >题目说明</el-button
                                                    > </el-popover
                                                ><el-popover
                                                        placement="right"
                                                        width="400"
                                                        trigger="click"
                                                        @show="checkSelect(item,index)"
                                                >
                                                    <div
                                                            v-for="(i, n) in item.option"
                                                            style="margin: 10px"
                                                    >
                                                        第{{ n + 1 }}个选项:
                                                        <el-select
                                                                v-model="item.jump[n]"
                                                                clearable
                                                                placeholder="不需要跳题请留空"
                                                        >
                                                            <el-option
                                                                    v-for="(i1,n1) in format"
                                                                    :key="i1.title"
                                                                    :label=`第${n1+1}题:${i1.title}`
                                                                    :value="i1.flag"
                                                                    v-if="index<n1"
                                                            >
                                                            </el-option>
                                                        </el-select>
                                                    </div>
                                                    <el-button
                                                            slot="reference"
                                                            type="text"
                                                            style="margin-left: 10px"
                                                    >跳题选择</el-button
                                                    >
                                                </el-popover></el-col
                                            >
                                            <el-col
                                                    :span="16"
                                                    style="display: flex; justify-content: end"
                                            >
                                                <div class="btn" @click="copyItem(index)">复制</div>
                                                <div class="btn" @click="delItem(index)">删除</div>
                                                <div class="btn" @click="upItem(index)">上移</div>
                                                <div class="btn" @click="downItem(index)">下移</div>
                                                <div class="btn" @click="topItem(index)">置顶</div>
                                                <div class="btn" @click="bottomItem(index)">
                                                    置底
                                                </div></el-col
                                            >
                                        </div>
                                    </el-row>
                                    <div>
                                        <el-row
                                                :gutter="20"
                                                style="
                        background-color: #d7d7d7;
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                        >
                                            <el-col :span="8"
                                            ><div class="grid-content bg-purple">选项</div></el-col
                                            >
                                            <el-col :span="4" :offset="12"
                                            ><div class="grid-content bg-purple">
                                                    上移 下移
                                                </div></el-col
                                            >
                                        </el-row>
                                        <el-row
                                                :gutter="20"
                                                style="
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                                v-for="(item1, index1) in item.option"
                                                :key="index"
                                        >
                                            <el-col :span="8"
                                            ><el-input
                                                        v-model="item.option[index1]"
                                                        :placeholder="'选项' + letter[index1]"
                                                        style="margin: 10px"
                                                ></el-input
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-circle-plus-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="addOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-remove-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="delOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1" :offset="11"
                                            ><i
                                                        class="el-icon-top"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="upOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-bottom"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="downOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                        </el-row>
                                    </div>
                                </div>

                                  <div v-if="item.type == 7">
                                    <el-input placeholder="请输入题目标题" v-model="item.title">
                                        <template slot="prepend">标题</template>
                                    </el-input>
                                    <el-row>
                                        <div style="margin: 20px 0">
                                             <el-col :span="8"
                                            >
                                                <el-checkbox
                                                        v-model="item.necessary"
                                                        style="margin: 10px"
                                                >必答题
                                                </el-checkbox
                                                >
                                                <el-popover
                                                    placement="right"
                                                    width="400"
                                                    trigger="click">
                                                <el-input
                                                        type="textarea"
                                                        :rows="4"
                                                        placeholder="请输入题目说明"
                                                        v-model="item.note">
                                                </el-input>
                                                <el-button slot="reference" type="text">题目说明</el-button>
                                            </el-popover>
                                            </el-col>
                                            <el-col
                                                    :span="16"
                                                    style="display: flex; justify-content: end"
                                            >
                                                <div class="btn" @click="copyItem(index)">复制</div>
                                                <div class="btn" @click="delItem(index)">删除</div>
                                                <div class="btn" @click="upItem(index)">上移</div>
                                                <div class="btn" @click="downItem(index)">下移</div>
                                                <div class="btn" @click="topItem(index)">置顶</div>
                                                <div class="btn" @click="bottomItem(index)">
                                                    置底
                                                </div></el-col
                                            >
                                        </div>
                                    </el-row>
                                    <div>
                                        <el-row
                                                :gutter="20"
                                                style="
                        background-color: #d7d7d7;
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                        >
                                            <el-col :span="8"
                                            ><div class="grid-content bg-purple">选项</div></el-col
                                            >
                                            <el-col :span="4" :offset="12"
                                            ><div class="grid-content bg-purple">
                                                    上移 下移
                                                </div></el-col
                                            >
                                        </el-row>
                                        <el-row
                                                :gutter="20"
                                                style="
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                      "
                                                v-for="(item1, index1) in item.option"
                                                :key="index"
                                        >
                                            <el-col :span="8"
                                            ><el-input
                                                        v-model="item.option[index1]"
                                                        placeholder="行标题"
                                                        style="margin: 10px"
                                                ></el-input
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-circle-plus-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="addOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-remove-outline"
                                                        style="
                            font-size: 24px;
                            line-height: 60px;
                            cursor: pointer;
                          "
                                                        @click="delOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1" :offset="11"
                                            ><i
                                                        class="el-icon-top"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="upOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                            <el-col :span="1"
                                            ><i
                                                        class="el-icon-bottom"
                                                        style="
                            font-size: 24px;
                            line-height: 39px;
                            margin: 11px -6px;
                            border: 1px solid;
                            border-radius: 50%;
                            width: 35px;
                            height: 35px;
                            cursor: pointer;
                          "
                                                        @click="downOption(item.option, index1, item)"
                                                ></i
                                                ></el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </el-main>

        </el-container>
    </el-container>
</div>

<script src="__CDN__/assets/js/vue.min.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="__CDN__/assets/css/element-ui-2.15.13.css">
<!-- 引入组件库 -->
<script src="__CDN__/assets/js/element-ui.2.15.13.js"></script>
<link rel="stylesheet" href="__CDN__/assets/css/tailwind.css" type="text/css">
<script>
    const fill = function () {
        const obj = Object.create(null);
        (obj.type = 3), (obj.necessary = true), (obj.title = "");
        obj.flag = Math.random().toString(36).slice(-8)
        return obj;
    };
    const radio = function () {
        const obj = Object.create(null);
        obj.type = 0;
        obj.option = [""];
        obj.necessary = true;
        obj.title = "";
        obj.flag = Math.random().toString(36).slice(-8)
        return obj;
    };
    const radio1 = function () {
        const obj = Object.create(null);
        obj.flag = Math.random().toString(36).slice(-8);
        obj.type = 6;
        obj.option = [""];
        obj.necessary = true;
        obj.title = "";
        obj.node = "";
        obj.jump = [null];
        return obj;
    };
    const radioRate = function () {
        const obj = Object.create(null);
        obj.type = 5;
        obj.option = [""];
        obj.score = [0];
        obj.title = "";
        obj.flag = Math.random().toString(36).slice(-8)
        return obj;
    };
    const select = function () {
        const obj = Object.create(null);
        obj.type = 1;
        obj.option = [""];
        obj.necessary = true;
        (obj.min_choice = 1), //  最少1
            (obj.max_choice = 1), //
            (obj.title = "");
        obj.flag = Math.random().toString(36).slice(-8)
        return obj;
    };
    const list = function () {
        const obj = Object.create(null);
        obj.type = 4;
        obj.option = [""];
        obj.title_list = [""]; //选项的文本
        obj.necessary = true;
        obj.title = "";
        obj.flag = Math.random().toString(36).slice(-8)
        return obj;
    };

       const list2 = function () {
         const obj = Object.create(null);
        obj.flag = Math.random().toString(36).slice(-8);
        obj.type = 7;
        obj.option = [""];
        obj.necessary = true;
        obj.title = "";
        obj.node = "";
        obj.text_list = [null];
        return obj;
    };
    const fillList = function () {
        const obj = Object.create(null);
        (obj.type = 2),
            (obj.text_list = []), //小题目文本
            (obj.necessary = true);
        obj.title = "";
        obj.text = "";
        obj.word = "";
        obj.blank_num = 0;
        obj.blank_rule = [];
        obj.flag = Math.random().toString(36).slice(-8)
        return obj;
    };

    new Vue({
        el: '#app',
        data: function () {
            return {
                available: <?= ($qModel['available']) ? 'true' : 'false' ?>,
                full_mark: <?= (int)($qModel['full_mark']) ?>,
                pass_mark: <?= (int)($qModel['pass_mark']) ?>,
                max_num: <?= (int)($qModel['max_num']) ?>,
                is_automatic: <?= $qModel['is_automatic'] ? 'true' : 'false'?>,
                tabPosition: "top",
                form: <?= json_encode($qModel)?>,
                class1: <?= json_encode($class)?>,
                mode: <?=json_encode($mode) ?>,
                questionTypeName: <?=json_encode($questionTypeName) ?>,
                format: <?= $qModel['format'] ?>,
                // format_json: <?= $qModel['format'] ?>,
                activeNames: [],
                letter: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
                dialogVisible1: false,
            };
        },
        methods: {
            submit() {
                if (!this.form.name) {
                    this.$notify({
                        title: "警告",
                        message: "请填写问卷标题！",
                        type: "warning",
                    });
                    return;
                }
                if (!this.form.header_note) {
                    this.$notify({
                        title: "警告",
                        message: "请填写问卷简介！",
                        type: "warning",
                    });
                    return;
                }
                if (this.form.show_mode == undefined) {
                    this.$notify({
                        title: "警告",
                        message: "请填写展示模式！",
                        type: "warning",
                    });
                    return;
                }
                if (!this.full_mark) {
                    this.$notify({
                        title: "警告",
                        message: "请填写满分分数！",
                        type: "warning",
                    });
                    return;
                }
                if (!this.pass_mark) {
                    this.$notify({
                        title: "警告",
                        message: "请填写及格分数！",
                        type: "warning",
                    });
                    return;
                }
                if (this.q_class_id < 0) {
                    this.$notify({
                        title: "警告",
                        message: "请选择问卷分类！",
                        type: "warning",
                    });
                    return;
                }
                const postData = {
                    q_class_id: this.form.q_class_id,
                    available: this.available,
                    show_mode: this.form.show_mode,
                    full_mark: parseInt(this.full_mark),
                    pass_mark: parseInt(this.pass_mark),
                    max_num: parseInt(this.max_num),
                    is_automatic: this.is_automatic,
                    name: this.form.name,
                    header_note: this.form.header_note,
                };
                
                console.log(postData);
                const arr = [];
                for (let i = 0; i < this.format.length; i++) {
                    if (this.format[i].type == 3) {
                        if (!this.format[i].title) {
                            this.$notify({
                                title: "警告",
                                message: "第" + (i + 1) + "题标题未填！",
                                type: "warning",
                            });
                            return;
                        }
                        arr.push({
                            note: (this.format[i].note == undefined || this.format[i].note == '') ? '' : this.format[i].note,
                            type: this.format[i].type,
                            necessary: this.format[i].necessary,
                            title: this.format[i].title,
                        });
                    }
                    if (this.format[i].type == 0) {
                        if (!this.format[i].title) {
                            this.$notify({
                                title: "警告",
                                message: "第" + (i + 1) + "题标题未填！",
                                type: "warning",
                            });
                            return;
                        }
                        for (let j = 0; j < this.format[i].option.length; j++) {
                            if (this.format[i].option[j] == '') {
                                this.$notify({
                                    title: "警告",
                                    message: "第" + (i + 1) + "题" + "第" + (j + 1) + '个选项' + "标题未填！",
                                    type: "warning",
                                });
                                return
                            }
                        }
                        arr.push({
                            note: (this.format[i].note == undefined || this.format[i].note == '') ? '' : this.format[i].note,
                            other_option: (this.format[i].other_option == undefined || this.format[i].other_option == (-1)) ? -1 : this.format[i].other_option,
                            type: this.format[i].type,
                            necessary: this.format[i].necessary,
                            title: this.format[i].title,
                            option_num: this.format[i].option.length,
                            option: [...this.format[i].option]
                        });
                    }
                    if (this.format[i].type == 1) {
                        if (!this.format[i].title) {
                            this.$notify({
                                title: "警告",
                                message: "第" + (i + 1) + "题标题未填！",
                                type: "warning",
                            });
                            return;
                        }
                        for (let j = 0; j < this.format[i].option.length; j++) {
                            if (this.format[i].option[j] == '') {
                                this.$notify({
                                    title: "警告",
                                    message: "第" + (i + 1) + "题" + "第" + (j + 1) + '个选项' + "标题未填！",
                                    type: "warning",
                                });
                                return
                            }
                        }
                        if (this.format[i].min_choice > this.format[i].max_choice) {
                            this.$notify({
                                title: "警告",
                                message: "第" + (i + 1) + "题最小值超过最大值！",
                                type: "warning",
                            });
                            return
                        }
                        if (this.format[i].option.length < this.format[i].max_choice) {
                            this.$notify({
                                title: "警告",
                                message: "第" + (i + 1) + "题选项数量超过最大选择数！",
                                type: "warning",
                            });
                            return;
                        }
                        arr.push({
                            note: (this.format[i].note == undefined || this.format[i].note == '') ? '' : this.format[i].note,
                            other_option: (this.format[i].other_option == undefined || this.format[i].other_option == (-1)) ? -1 : this.format[i].other_option,
                            type: this.format[i].type,
                            necessary: this.format[i].necessary,
                            title: this.format[i].title,
                            min_choice: this.format[i].min_choice,
                            max_choice: this.format[i].max_choice,
                            option_num: this.format[i].option.length,
                            option: [...this.format[i].option]
                        });
                    }
                    if (this.format[i].type == 2) {
                        if (!this.format[i].title) {
                            this.$notify({
                                title: "警告",
                                message: "第" + (i + 1) + "题标题未填！",
                                type: "warning",
                            });
                            return;
                        }
                        let num = this.format[i].text_list.filter(function (res) {
                            return res == '$';
                        });
                        if (num.length == 0) {
                            this.$notify({
                                title: "警告",
                                message: "第" + (i + 1) + "题填空内容未设置！",
                                type: "warning",
                            });
                            return;
                        }
                        for (let j = 0; j < num.length; j++) {
                            if (this.format[i].blank_rule[j].type == 2) {
                                delete this.format[i].blank_rule[j].min
                                delete this.format[i].blank_rule[j].max
                            }
                        }
                        arr.push({
                            note: (this.format[i].note == undefined || this.format[i].note == '') ? '' : this.format[i].note,
                            type: this.format[i].type,
                            necessary: this.format[i].necessary,
                            title: this.format[i].title,
                            blank_num: num.length,
                            text_list: [...this.format[i].text_list],
                            blank_rule: [...this.format[i].blank_rule]
                        });
                    }
                    if (this.format[i].type == 4) {
                        if (!this.format[i].title) {
                            this.$notify({
                                title: "警告",
                                message: "第" + (i + 1) + "题标题未填！",
                                type: "warning",
                            });
                            return;
                        }
                        for (let j = 0; j < this.format[i].option.length; j++) {
                            if (this.format[i].option[j] == '') {
                                this.$notify({
                                    title: "警告",
                                    message: "第" + (i + 1) + "题" + "第" + (j + 1) + '个横向选项' + "标题未填！",
                                    type: "warning",
                                });
                                return
                            }
                        }
                        for (let k = 0; k < this.format[i].title_list.length; k++) {
                            if (this.format[i].title_list[k] == '') {
                                this.$notify({
                                    title: "警告",
                                    message: "第" + (i + 1) + "题" + "第" + (k + 1) + '个纵向选项' + "标题未填！",
                                    type: "warning",
                                });
                                return
                            }
                        }

                        arr.push({
                            note: (this.format[i].note == undefined || this.format[i].note == '') ? '' : this.format[i].note,
                            type: this.format[i].type,
                            necessary: this.format[i].necessary,
                            title: this.format[i].title,
                            title_num: this.format[i].title_list.length,
                            title_list: [...this.format[i].title_list],
                            option_num: this.format[i].option.length,
                            option: [...this.format[i].option]
                        });
                    }
                    if (this.format[i].type == 5) {
                        if (!this.format[i].title) {
                            this.$notify({
                                title: "警告",
                                message: "第" + (i + 1) + "题标题未填！",
                                type: "warning",
                            });
                            return;
                        }
                        for (let j = 0; j < this.format[i].option.length; j++) {
                            if (this.format[i].option[j] == '') {
                                this.$notify({
                                    title: "警告",
                                    message: "第" + (i + 1) + "题" + "第" + (j + 1) + '个选项' + "标题未填！",
                                    type: "warning",
                                });
                                return
                            }
                            if (this.format[i].score[j] == undefined || this.format[i].score[j] == null) {
                                this.$notify({
                                    title: "警告",
                                    message: "第" + (i + 1) + "题" + "第" + (j + 1) + '个选项' + "分数未填！",
                                    type: "warning",
                                });
                                return
                            }
                        }


                        arr.push({
                            note: (this.format[i].note == undefined || this.format[i].note == '') ? '' : this.format[i].note,
                            type: this.format[i].type,
                            score: [...(this.format[i].score.map(item => item*1))],
                            //score: [...(this.format[i].score.map(item => item * 2))],
                            title: this.format[i].title,
                            option_num: this.format[i].option.length,
                            option: [...this.format[i].option]
                        });
                    }
                    if (this.format[i].type == 7) {
                       
                        if (!this.format[i].title) {
                            this.$notify({
                                title: "警告",
                                message: "第" + (i + 1) + "题标题未填！",
                                type: "warning",
                            });
                            return;
                        }
                        for (let j = 0; j < this.format[i].option.length; j++) {
                            if (this.format[i].option[j] == "") {
                                this.$notify({
                                    title: "警告",
                                    message:
                                        "第" +
                                        (i + 1) +
                                        "题" +
                                        "第" +
                                        (j + 1) +
                                        "行" +
                                        "标题未填！",
                                    type: "warning",
                                });
                                return;
                            }
                        }

                       
                    
                        let a = []
                      
                        arr.push({
                            title_list: [...this.format[i].option],
                            note:
                                this.format[i].note == undefined || this.format[i].note == ""
                                    ? ""
                                    : this.format[i].note,
                            type: this.format[i].type,
                            necessary: this.format[i].necessary,//这个地方变成true
                            title: this.format[i].title,
                            option_num: this.format[i].option.length,
                            option: [...this.format[i].option],
                        });
                    }
                    if (this.format[i].type == 6) {
                        if(i==this.format.length-1){
                            this.$notify({
                                title: "警告",
                                message: "跳题不能在最后一题！",
                                type: "warning",
                            });
                            return;
                        }
                        if (!this.format[i].title) {
                            this.$notify({
                                title: "警告",
                                message: "第" + (i + 1) + "题标题未填！",
                                type: "warning",
                            });
                            return;
                        }
                        for (let j = 0; j < this.format[i].option.length; j++) {
                            if (this.format[i].option[j] == "") {
                                this.$notify({
                                    title: "警告",
                                    message:
                                        "第" +
                                        (i + 1) +
                                        "题" +
                                        "第" +
                                        (j + 1) +
                                        "个选项" +
                                        "标题未填！",
                                    type: "warning",
                                });
                                return;
                            }
                        }
                        console.log(this.format[i])
                        for (let j = 0; j < this.format[i].option.length; j++) {
                            if(this.format[i].jump[j]==undefined||this.format[i].jump[j]==''){
                                // this.format[i].jump[j]=this.format[i+1].flag
                            }
                        }
                        let a = []
                        for (let j = 0; j < this.format[i].jump.length; j++) {
                            for(let k=0;k<this.format.length;k++){
                                console.log(this.format[i].jump[j],this.format[k].flag)
                                if(this.format[i].jump[j]==this.format[k].flag){
                                    if(k<=i){
                                        this.$notify({
                                            title: "警告",
                                            message:`第${i+1}题所选择跳题的题目应该在该题目之后`,
                                            type: "warning",
                                        });
                                        return;
                                    }
                                    a[j]=k
                                    break
                                }
                            }
                        }
                        arr.push({
                            jump:a,
                            note:
                                this.format[i].note == undefined || this.format[i].note == ""
                                    ? ""
                                    : this.format[i].note,
                            type: this.format[i].type,
                            necessary: this.format[i].necessary,//这个地方变成true
                            title: this.format[i].title,
                            option_num: this.format[i].option.length,
                            option: [...this.format[i].option],
                        });
                    }

                }
                postData.format = arr
                var that = this;
                //console.log(postData);
                
                layer.confirm('确认提交？提交后可在修改界面修改问卷模板。', function (index) {
                    $.post("__CDN__/FQfZvLoCyH.php/question_format/edit", {
                        postData: JSON.stringify(postData), ids: <?=$qModel['id']?>
                    }, function (result) {
                        if(result.code == '1'){
                            
                            Layer.msg('操作成功');
                            setTimeout(function(){
                                parent.location.reload(true)
                            },300)
                           
                            // this.jump();
                        }else{
                            Layer.msg(result.msg);
                           
                        }
                        return ;
                    });
                    layer.close(index);
                });
            },
            handleClose() {
                if (this.is_automatic === null) {
                    return;
                }
            },
            getData() {
            },
            swapItems(arr, index1, index2) {
                arr[index1] = arr.splice(index2, 1, arr[index1])[0];
                return arr;
            },
            copyItem(index) {
                const obj = JSON.parse(JSON.stringify(this.format[index]));
                obj.flag = Math.random().toString(36).slice(-8);
                this.format.push(obj);
            },
            delItem(index) {
                this.format.splice(index, 1);
            },
            upItem(index) {
                if (index == 0) {
                    this.$notify({
                        title: "警告",
                        message: "已在顶部！",
                        type: "warning",
                    });
                } else {
                    this.swapItems(this.format, index, index - 1);
                }
            },
            downItem(index) {
                if (index == this.format.length - 1) {
                    this.$notify({
                        title: "警告",
                        message: "已在底部！",
                        type: "warning",
                    });
                } else {
                    this.swapItems(this.format, index, index + 1);
                }
            },
            topItem(index) {
                if (index == 0) {
                    this.$notify({
                        title: "警告",
                        message: "已在顶部！",
                        type: "warning",
                    });
                } else {
                    this.format.unshift(this.format.splice(index, 1)[0]);
                }
            },
            bottomItem(index) {
                if (index == this.format.length - 1) {
                    this.$notify({
                        title: "警告",
                        message: "已在底部！",
                        type: "warning",
                    });
                } else {
                    this.format.push(this.format.splice(index, 1)[0]);
                }
            },
            addItem(type) {
                if (type == 3) {
                    this.format.push(fill());
                }
                if (type == 0) {
                    this.format.push(radio());
                }
                if (type == 1) {
                    this.format.push(select());
                }
                if (type == 4) {
                    this.format.push(list());
                }
                if (type == 2) {
                    this.format.push(fillList());
                }
                if (type == 5) {
                    this.format.push(radioRate());
                }
                if (type == 6) {
                    this.format.push(radio1());
                }
                 if (type == 7) {
                    this.format.push(list2());
                }
                this.activeNames.push(this.format.length - 1);
            },
            addOption(item, i, item1) {
                if (item1.other_option == undefined || item1.other_option == -1) {
                    item.splice(i + 1, 0, "");
                } else {
                    if (item1.other_option > i) {
                        item.splice(i + 1, 0, "");
                        item1.other_option = item1.other_option + 1;
                    }
                    if (item1.other_option <= i) {
                        item.splice(i + 1, 0, "");
                    }
                }
            },
            addotherItem(item) {
                if (item.other_option==undefined || item.other_option == -1) {
                    item.option.push("其他");
                    item.other_option = item.option.length - 1;
                } else {
                    this.$notify({
                        title: "警告",
                        message: "每题只能有一道其他选项！",
                        type: "warning",
                    });
                }
            },
            delOption(item, i, item1) {

                if (item.length == 1) {
                    this.$notify({
                        title: "警告",
                        message: "最少需要一个选项！",
                        type: "warning",
                    });
                } else {
                    if(item1.type == 6){
                        item1.jump=[]
                        this.$notify({
                            title: "警告",
                            message: "跳题逻辑已清空，请重新设置！",
                            type: "warning",
                        });
                    }
                    if (item1.other_option == undefined || item1.other_option == -1) {
                        item.splice(i, 1);
                    } else {
                        if (item1.other_option < i) {
                            item.splice(i, 1);
                        }
                        if (item1.other_option > i) {
                            item.splice(i, 1);
                            item1.other_option = item1.other_option - 1;
                        }
                        if (item1.other_option == i) {
                            item.splice(i, 1);
                            item1.other_option = -1;
                        }
                    }
                }
            },
            upOption(item, i, item1) {
                if (i == 0) {
                    this.$notify({
                        title: "警告",
                        message: "已在顶部！",
                        type: "warning",
                    });
                } else {
                    if (item1.other_option == undefined || item1.other_option == -1) {
                        this.swapItems(item, i, i - 1);
                    } else {
                        if (item1.other_option == i) {
                            this.swapItems(item, i, i - 1);
                            item1.other_option = item1.other_option - 1;
                        } else {
                            if (i - 1 == item1.other_option) {
                                this.swapItems(item, i, i - 1);
                                item1.other_option = item1.other_option + 1;
                            } else {
                                this.swapItems(item, i, i - 1);
                            }
                        }
                    }
                }
            },
            downOption(item, i, item1) {
                if (i == item.length - 1) {
                    this.$notify({
                        title: "警告",
                        message: "已在底部！",
                        type: "warning",
                    });
                } else {
                    console.log(i, item1.other_option);
                    if (item1.other_option == undefined || item1.other_option == -1) {
                        this.swapItems(item, i, i + 1);
                    } else {
                        if (item1.other_option == i) {
                            console.log(1);
                            this.swapItems(item, i, i + 1);
                            item1.other_option = item1.other_option + 1;
                        } else {
                            if (i + 1 == item1.other_option) {
                                this.swapItems(item, i, i + 1);
                                item1.other_option = item1.other_option - 1;
                            } else {
                                this.swapItems(item, i, i + 1);
                            }
                        }
                    }
                }
            },
            addOption1(item, i) {
                item.splice(i + 1, 0, "");
            },
            delOption1(item, i) {
                if (item.length == 1) {
                    this.$notify({
                        title: "警告",
                        message: "最少需要一个选项！",
                        type: "warning",
                    });
                } else {
                    item.splice(i, 1);
                }
            },
            upOption1(item, i) {
                if (i == 0) {
                    this.$notify({
                        title: "警告",
                        message: "已在顶部！",
                        type: "warning",
                    });
                } else {
                    this.swapItems(item, i, i - 1);
                }
            },
            checkSelect(item,i){
                console.log(item)
                for (let j = 0; j < item.jump.length; j++) {
                    for(let k=0;k<this.format.length;k++){
                        if(item.jump[j]==this.format[k].flag){
                            console.log(k,i,j)
                            if(k<=i){
                                item.jump[j]=null
                                console.log(this.format)
                            }
                        }
                    }
                }
                this.$forceUpdate();
            },
            downOption1(item, i) {
                if (i == item.length - 1) {
                    this.$notify({
                        title: "警告",
                        message: "已在底部！",
                        type: "warning",
                    });
                } else {
                    this.swapItems(item, i, i + 1);
                }
            },
            addFill(item) {
                item.text = item.text + " ___ ";
                item.text_list.push("$");
                item.blank_rule.push({type: 1, min: 1, max: 100});
                item.blank_num = item.blank_num + 1;
                this.$forceUpdate()
            },
            addText(item) {
                if (item.word) {
                    item.text = item.text + item.word;
                    item.text_list.push(item.word);
                    item.word=''
                } else {
                    this.$notify({
                        title: "警告",
                        message: "文字内容不能为空！",
                        type: "warning",
                    });
                }
                this.$forceUpdate()
            },

               addHuanhang(item) {
                item.text = item.text + '<br>';
                    item.text_list.push('<br>');
                    item.word=''

                this.$forceUpdate()
            },
            delFill(item){
                if(item.text.endsWith(" ___ ")){
                    item.text=item.text.slice(0,item.text.length-(" ___ ".length))
                    item.text_list.pop()
                    item.blank_num=item.blank_num-1
                    item.blank_rule.pop()
                }else{
                    item.text=item.text.slice(0,item.text.length-(item.text_list[item.text_list.length-1].length))
                    item.text_list.pop()
                }
                this.$forceUpdate()
            },
            typeChange(row, e) {
            },
            jump() {
                window.location.href = "<?= url('question_cate/index')?>";
            },
        },
        created() {
            console.log(this.format)
            // this.getData();
            for (let i = 0; i < this.format.length; i++) {
                if (this.format[i].type == 2) {


                    this.format[i].text = "";
                    for (let j = 0; j < this.format[i].text_list.length; j++) {
                        if (this.format[i].text_list[j] == "$") {
                            this.format[i].text = this.format[i].text + " ___ ";
                        } else {
                            this.format[i].text = this.format[i].text + this.format[i].text_list[j];
                        }
                    }

                }
                this.$forceUpdate()
            }

            this.format.forEach(e=>{
                e.flag=Math.random().toString(36).slice(-8)
            })
            for(let i=0;i<this.format.length;i++){
                if(this.format[i].type==6){
                    for(let j=0;j<this.format[i].jump.length;j++){
                        this.format[i].jump[j]=this.format[i].jump[j]!==null?this.format[this.format[i].jump[j]].flag:''
                    }
                }
            }
        },
        computed:{
            jumpSelect(){
                return function (flag){
                    for(let i=0;i<this.format.length;i++){
                        if(this.format[i].flag==flag){
                            return i
                        }
                    }
                }
            }
        }

    })
</script>

<style>

    body {

        overflow-y: hidden;
        overflow-x: hidden;
    }

    .el-header {
        position: relative;
        width: 100%;
        height: 60px;
    }

    .el-header,
    .el-footer {
        background-color: #313131;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        height: 100vh;
        background-color: #fff;
        color: #333;
        text-align: center;
        margin: 0 calc(12.5% - 125px);
    }

    .el-aside {
        display: block;
        position: absolute;
        left: 0;
        top: 75px;
        bottom: 0;
        z-index: 999;
    }

    .el-main {
        margin: 20px 0px 0px 20px;
        background-color: #fff;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    .el-main {
        position: absolute;
        left: calc(20% + 20px);
        top: 60px;
        bottom: 0;
        width: calc(75%);
        height: calc(100vh - 135px);
        overflow: hidden;
        padding: 20px 10px 20px 20px;

    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .el-radio-group {
        background-color: #e8e8e8;
        padding: 10px;
        border-radius: 14px;
    }

    .el-radio-button__inner:hover {
        color: #333 !important;
    }

    .el-radio-button__inner {
        background-color: #e8e8e8 !important;
        border: 0px !important;
        color: #878787 !important;
        font-weight: 600;
    }

    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        color: #333 !important;
        background-color: #fff !important;

        box-shadow: 1px 1px 2px 0 gray !important;
    }

    .title-btn {
        height: 40px;
        width: 150px;
        margin: 10px auto;
        line-height: 40px;
        font-weight: 600;
        color: #333;
        border-radius: 14px;
        position: relative;
        transition: all 0.5s linear;
        cursor: pointer;
    }

    .title-btn:hover {
        background-color: #00d297;
        border-radius: 14px;
        color: white;
        transition: all 0.5s linear;
    }

    .el-collapse-item__header {
        font-size: 18px !important;
        margin: 0 20px !important;
        background-color: #313131 !important;
        color: #fff !important;
    }

    .el-collapse-item {
        text-align: left !important;
    }

    .btn {
        padding: 5px 15px;
        color: #9a9a9a;
        border: 2px solid #9a9a9a;
        font-weight: 600;
        margin: 0 5px;
        cursor: pointer;
    }

    .el-collapse-item {
        background-color: #313131 !important;
    }

    .el-collapse-item__header {
        height: auto !important;
    }

    .box {
        border: 2px #979797 solid;
        margin: 10px 0px 0 0;
        padding: 25px 15px;
        border-radius: 14px;
        background-color: #f5f5f5;
    }
    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 1.6rem 0;
        font-weight: 600;
        font-size: 100%
    }

    h2 {
        font-size: 1.5em
    }
</style>
</body>
</html>